<!DOCTYPE html>
<html lang="en">
<head>
  <title></title>
  <script type="text/javascript" src="../internal.js"></script>
  <style>
    #table-list input{
      display: inline-block;
      width: 100px;
    }
  </style>
</head>
<body>
<div>
  <div>
  合同属性:
  <select id="tableCode">
    <option value="itemList">合同明细项</option>
  </select>
  <button onclick="appendHeader()">添加列头</button>
  </div>
  <div></div>
  <ul id="table-list">
    <!-- <li>
      是否隐藏:<select id="table-list-hidden-0"><option value="0">否</option><option value="1">是</option></select>
      明细属性:<select id="table-list-code-0" onchange="selectChange(this)">
        <option value="materialId">物料ID</option>
        <option value="materialCode">物料编码</option>
        <option value="materialName">物料名称</option>
        <option value="materialSpec">规格</option>
        <option value="itemQty">数量</option>
        <option value="unitId">单位ID</option>
        <option value="unitCode">单位编码</option>
        <option value="unitName">单位名称</option>
        <option value="taxRate">税率</option>
        <option value="taxPrice">含税单价</option>
        <option value="total">金额</option>
      </select>
      列名:<input id="table-list-head-0" value="物料编码">
    </li> -->
  </ul>
  <!-- <p>行数：<input type="text" id="row-count" value="1"/></p> -->
  </div>
  <button onclick="submit()">确定</button>
</div>
</body>
<script>
  function submit(){
    var id = 'table' + Math.random().toString().slice(-10);
    var headList= [];
    var columnLen = document.getElementById('table-list').children.length;
    var str = '<table id="'+id+'">';
    str += '<tr type="header">';
    //默认有ID属性
    str +='<th>ID</th>';
    headList.push({field:"id",hide:true});
    for (let m = 1; m < columnLen+1; m++) {
        var select =  document.getElementById('table-list-code-' + m);
        var selectHide =  document.getElementById('table-list-hide-' + m);
        var headField = select[select.selectedIndex].value;
        var hide = selectHide[selectHide.selectedIndex].value;
        str += '<th>';
        str += document.getElementById('table-list-head-' + m).value;
        str += '</th>';
        headList.push({field:headField,hide:hide});
    }
    str += '</tr>';
    str += '</table>';
    var content = JSON.stringify(headList);
    editor.execCommand('insertHtml',str, true);
    editor.elList.push({
        elId: id,
        elType: 'table',
        elContent:content,
        elField: document.getElementById('tableCode').value
    });

    dialog.popup.hide();
  }
  function appendHeader() {
    var codeList = [{
      value: 'materialId',
      label: '物料ID'
    },{
      value: 'materialCode',
      label: '物料编码'
    }, {
      value: 'materialName',
      label: '物料名称'
    }, {
      value: 'materialSpec',
      label: '规格'
    },{
      value: 'itemQty',
      label: '数量'
    },{
      value: 'unitId',
      label: '单位ID'
    },{
      value: 'unitCode',
      label: '单位编码'
    },{
      value: 'unitName',
      label: '单位名称'
    },{
      value: 'taxRate',
      label: '税率'
    },{
      value: 'unitPrice',
      label: '单价'
    },{
      value: 'total',
      label: '金额'
    }
  ];
    var ul = document.getElementById('table-list');
    var len = ul.children.length+1;
    var li = document.createElement("li");
    var hideSelect = document.createElement("select");
    hideSelect.id = 'table-list-hide-'+ len;
    var opYes = document.createElement('option');
    opYes.value = 1;
    opYes.innerText = '是';
    var opNo = document.createElement('option');
    opNo.value = 0;
    opNo.innerText = '否';
    hideSelect.appendChild(opNo);
    hideSelect.appendChild(opYes);
    li.append('是否隐藏:');
    li.appendChild(hideSelect);
    var select = document.createElement('select');
    select.id = 'table-list-code-' + len;
    // var op = document.createElement('option');
    // op.innerText = '无';
    // op.value = '';
    // select.appendChild(op);
    for (var i = 0; i < codeList.length; i++) {
      var op = document.createElement('option');
      op.innerText = codeList[i].label;
      op.value = codeList[i].value;
      select.appendChild(op);
    }
    select.addEventListener('change', function () {
      selectChange(this);
    });
    li.append(' 明细属性:');
    li.append(select);
    li.append(' 列名:');
    var input1 = document.createElement("input");
    input1.id = 'table-list-head-' + len ;
    li.appendChild(input1);
    // li.append('label:');
    // var input2 = document.createElement("input");
    // input2.id = 'table-list-label-' + len;
    // li.appendChild(input2);
    var delBtn = document.createElement('button');
    delBtn.innerText = '删除列';
    delBtn.addEventListener('click',function () {
      this.parentNode.parentNode.removeChild(this.parentNode);
    });
    li.appendChild(delBtn);
    ul.appendChild(li);
  }

  function selectChange(obj) {
    var id = obj.id.replace('table-list-code-', '');
    document.getElementById('table-list-head-'+id).value = obj[obj.selectedIndex].innerText;
  }

</script>
</html>
